<!--编辑企业用户-->
<template>
    <div>
        <el-tabs v-model="activeName2" type="card" >
            <el-tab-pane label="企业信息" name="first">
                <p>当前版本7</p>
                <!--<el-button type="primary" @click="openDialog('showHistory')">查看修改记录</el-button>-->

                <el-row>
                    <!--修改历史记录内容-->
                    <el-dialog title="修改记录" :visible.sync="dialog.showHistory.open" size="large"
                    v-if="dialog.showHistory.open" :modal=false>
                        <el-row :gutter="20">
                            <el-col :span="3"><span>版本号</span></el-col>
                            <el-col :span="3"><span>编辑人</span></el-col>
                            <el-col :span="3"><span>提交时间</span></el-col>
                            <el-col :span="3"><span>审核时间</span></el-col>
                            <el-col :span="3"><span>审核结果</span></el-col>
                            <el-col :span="3">审核人</el-col>
                            <el-col :span="3">操作</el-col>
                        </el-row>
                        <el-row :gutter="20" style="padding: 20px 0">
                            <el-col :span="3"><span>1</span></el-col>
                            <el-col :span="3"><span>李文龙</span></el-col>
                            <el-col :span="3"><span>2016-07-07</span></el-col>
                            <el-col :span="3"><span>2017-07-07</span></el-col>
                            <el-col :span="3"><span>通过</span></el-col>
                            <el-col :span="3">袁裕国</el-col>
                            <el-col :span="3">查看此版本</el-col>
                        </el-row>
                    </el-dialog>
                    <el-col :span="6"><h2>基础资料</h2></el-col>
                </el-row>
                <p>点击上传图片</p>
                <!--<el-upload-->
                        <!--class="upload-demo"-->
                        <!--:action="fileUploadAction"-->
                        <!--:on-preview="handlePreview"-->
                        <!--:on-remove="handleRemove"-->
                        <!--:file-list="fileList2"-->
                        <!--list-type="picture">-->
                    <!--<el-button size="small" type="primary">点击上传</el-button>-->
                    <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                <!--</el-upload>-->
                <el-upload
                        class="avatar-uploader"
                        :action="fileUploadAction"
                        :show-file-list="false"
                        :on-remove="handleRemove"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-button type="text" v-if="imageUrl" style="margin-left:25px" @click="paramFileRemove">删除图片</el-button>
                <el-form  ref="form" :model="form" label-width="80px" :rules="rules">
                    <!--企业名称-->
                    <el-form-item label="企业名称" prop="name">
                        <el-input v-model="form.name" style="width: 220px "></el-input>
                    </el-form-item>
                    <el-form-item label="企业类型" prop="typeofBus">
                        <el-select v-model="form.typeofBus" placeholder="请选择企业类型">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <!--上市情况-->
                    <el-form-item label="上市情况" prop="inMarket">
                        <el-select v-model="form.inMarket" placeholder="请选择上市情况">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="经营范围" prop="range">
                        <el-input v-model="form.range" style="width: 220px"></el-input>
                    </el-form-item>
                    <!--涉及领域-->
                    <el-form-item label="涉及领域" prop="checkList">
                        <el-checkbox-group v-model="form.checkList">
                            <el-checkbox label="集中热水供应"></el-checkbox>
                            <el-checkbox label="大型公共建筑节能"></el-checkbox>
                            <el-checkbox label="农业废弃物资源化利用"></el-checkbox>
                            <el-checkbox label="厨房垃圾处理"></el-checkbox>
                            <el-checkbox label="生活垃圾焚烧发电"></el-checkbox>
                            <el-checkbox label="市政污泥集中处理"></el-checkbox>
                            <el-checkbox label="农林生物质发电"></el-checkbox>
                            <el-checkbox label="建筑垃圾资源化处置"></el-checkbox>
                            <el-checkbox label="废旧轮胎资源化利用"></el-checkbox>
                            <el-checkbox label="光伏发电"></el-checkbox>
                            <el-checkbox label="区域能源解决方案"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="注册资金（万元）" prop="money">
                        <el-input v-model="form.money" style="width: 220px"></el-input>
                    </el-form-item>
                    <!--添加法人代表-->
                    <el-form-item label="法人代表" prop="faren">
                        <el-select v-model="form.faren" placeholder="请选择法人">
                            <el-option label="itme.name" value="item..id" v-for="item in form.personList"></el-option>
                        </el-select>
                        <el-button type="primary"  @click="openDialog('addFaren')">没有此人?去添加</el-button>
                    </el-form-item>
                    <!--添加联系人-->
                    <el-form-item label="联系人" prop="linkMan">
                        <el-select v-model="form.linkMan" placeholder="请选择联系人">
                            <el-option label="itme.name" value="item..id" v-for="item in form.personList"></el-option>
                        </el-select>
                        <el-button type="primary" @click="openDialog('addLinkman')">没有此人?去添加</el-button>
                    </el-form-item>
                    <!--企业地址三级连动 -->
                    <el-form-item label="企业地址" prop="region">
                        <el-select v-model="form.date2" size="small" style="width:120px" @change="change()">
                            <el-option :label="item.name" :value="item.id" v-for="item in provinceList" >
                            </el-option>
                        </el-select>
                        <el-select v-model="form.date3" size="small" style="width:120px" @change="changeThree()" v-if="city.length">
                            <el-option :label="item.name" :value="item.id" v-for="item in city"></el-option>
                        </el-select>
                        <el-select v-model="form.date4" size="small" style="width:120px" v-if="city.length&&country.length">
                            <el-option :label="item.name" :value="item.id" v-for="item in country"></el-option>
                        </el-select>
                    </el-form-item>
                    <!--企业详细地址-->
                    <el-form-item label="详细地址" prop="address">
                        <el-input v-model="form.address" style="width: 220px"></el-input>
                    </el-form-item>
                    <el-row :gutter="20">
                        <!--企业e-mail-->
                        <el-col :span="8">
                            <el-form-item label="企业E-mail" prop="email" >
                                <el-input v-model="form.email" ></el-input>
                            </el-form-item>
                        </el-col>
                        <!--企业电话-->
                        <el-col :span="8">
                            <el-form-item label="企业电话" prop="phone">
                                <el-input v-model="form.phone" ></el-input>
                            </el-form-item>
                        </el-col>
                        <!--企业传真-->
                        <el-col :span="8">
                            <el-form-item label="企业传真" prop="fax">
                                <el-input v-model="form.fax" ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!--企业网址-->
                    <el-form-item label="企业网址" prop="url">
                        <el-input v-model="form.url" style="width: 220px"></el-input>
                    </el-form-item>
                </el-form>
                <!--添加法人-->
                <el-dialog title="添加法人" :visible.sync="dialog.addFaren.open" :modal="false" size="full" v-if="dialog.addFaren.open">
                    <addMan></addMan>
                </el-dialog>
                <!--联系人-->
                <el-dialog title="添加联系人" :visible.sync="dialog.addLinkman.open" :modal="false" size="full" v-if="dialog.addLinkman.open">
                    <addMan></addMan>
                </el-dialog>
                <!--能力画像-->
                <h2>能力画像</h2>
                <el-tabs type="border-card">
                    <el-tab-pane label="设计" >
                        <template>
                            <el-radio class="radio" v-model="radio1" label="1">无设计能力</el-radio>
                            <el-radio class="radio" v-model="radio1" label="2">有设计能力</el-radio>
                        </template>
                        <editDesignable v-if="radio1==2"></editDesignable>
                    </el-tab-pane>
                    <el-tab-pane label="咨询">
                        <template>
                            <el-radio class="radio" v-model="radio2" label="1">无咨询能力</el-radio>
                            <el-radio class="radio" v-model="radio2" label="2">有咨询能力</el-radio>
                        </template>
                        <editConsultable v-if="radio2==2"></editConsultable>
                    </el-tab-pane>
                    <el-tab-pane label="承建">
                        <template>
                            <el-radio class="radio" v-model="radio3" label="1">无承建能力</el-radio>
                            <el-radio class="radio" v-model="radio3" label="2">有承建能力</el-radio>
                        </template>
                        <editBuildable v-if="radio3==2"></editBuildable>
                    </el-tab-pane>
                    <el-tab-pane label="设备供应">
                        <template>
                            <el-radio class="radio" v-model="radio4" label="1">无设备供应能力</el-radio>
                            <el-radio class="radio" v-model="radio4" label="2">有设备供应能力</el-radio>
                        </template>
                        <editDeviceable v-if="radio4==2"></editDeviceable>
                    </el-tab-pane>
                    <el-tab-pane label="投资">
                        <template>
                            <el-radio class="radio" v-model="radio5" label="1">无投资能力</el-radio>
                            <el-radio class="radio" v-model="radio5" label="2">有投资能力</el-radio>
                        </template>
                        <editInvestable v-if="radio5==2"></editInvestable>
                    </el-tab-pane>
                    <el-tab-pane label="运维">
                        <template>
                            <el-radio class="radio" v-model="radio6" label="1">无运维能力</el-radio>
                            <el-radio class="radio" v-model="radio6" label="2">有运维能力</el-radio>
                        </template>
                        <editOpsable v-if="radio6==2"></editOpsable>
                    </el-tab-pane>
                </el-tabs>
                <el-row>
                    <div style="margin: 10px auto;text-align: center">
                        <el-button type="primary" size="large" @click="submitForm">确定</el-button>
                    </div>
                </el-row>
            </el-tab-pane>
            <!--附件栏内容编辑-->
            <el-tab-pane label="附件栏" name="fourth" >
                <el-form  class="demo-form-inline" label-width="100px" :label-position="position">
                    <el-form-item label="营业执照">
                        <el-upload
                                class="upload-demo"
                                :on-success="handleChange0"
                                :action="fileUploadAction"
                                :on-remove="handleRemove"
                                :file-list="fileList0">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <span>(最多一份)</span>
                        </el-upload>

                    </el-form-item>
                    <!--财务报表-->
                    <el-form-item label="财务报表">
                        <el-upload
                                class="upload-demo"
                                :on-success="handleChange1"
                                :action="fileUploadAction"
                                :on-remove="handleRemove"
                                :file-list="fileList1">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <span>(最多一份)</span>
                        </el-upload>

                    </el-form-item>
                    <el-form-item label="照片">
                        <el-upload
                                class="upload-demo"
                                :on-success="handleChange2"
                                :action="fileUploadAction"
                                :on-remove="handleRemove"
                                :file-list="fileList2">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <span>(最多一份)</span>
                        </el-upload>
                    </el-form-item>
                <!--名片-->
                    <el-form-item label="名片">
                        <el-upload
                                :multiple="file"
                                class="upload-demo"
                                :on-success="handleChange3"
                                :action="fileUploadAction"
                                :on-remove="handleRemove"
                                :file-list="fileList3">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <span>(最多六份)</span>
                        </el-upload>
                    </el-form-item>
                <!--其他附件-->
                    <el-form-item label="其他附件">
                        <el-upload
                                :multiple="file"
                                class="upload-demo"
                                :on-success="handleChange4"
                                :action="fileUploadAction"
                                :on-remove="handleRemove"
                                :file-list="fileList4">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <span>(最多六份)</span>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    import _http from '@/components/common/http.vue'
    import _param from '@/components/common/param.vue'
    import Bus from '@/config/bus.js'
    import addMan from '@/components/working/common/addFaren/addMan.vue'
    import editDesignable from '@/components/working/common/editAbleList/editDesignable.vue'
    import editConsultable from '@/components/working/common/editAbleList/editConsultable.vue'
    import editBuildable from '@/components/working/common/editAbleList/editBuildable.vue'
    import editDeviceable from '@/components/working/common/editAbleList/editDeviceable.vue'
    import editInvestable from '@/components/working/common/editAbleList/editInvestable.vue'
    import editOpsable from '@/components/working/common/editAbleList/editOpsable.vue'
    export default {
        components:{editDesignable,editConsultable,editBuildable,editDeviceable,editInvestable,editOpsable,addMan},
        data() {
            return {
                file:true,
//                营业执照上传列表
                fileList0:[],
//                财务报表
                fileList1:[],
//                照片
                fileList2:[],
//                名片
                fileList3:[],
//                其他附件
                fileList4:[{response:{url:1234567}}],
                position:'left',
                apiPort:{
//                   地址接口
                    areaApi:'BASEURL/adminApi/dicTree?type=4',
                    //                    获取个人
                    person:'peopleList',
                },
                //                文件上传路径封装
                fileUploadAction:_param.param.fileUploadUrl,
                rules: {
                    name: [
                        { required: true, message: '请输入企业名称', trigger: 'blur' },
                    ],
                    address: [
                        { required: true, message: '请输输入详细地址', trigger: 'blur' },
                    ],
                    typeofBus: [
                        { required: true, message: '请选择企业类型', trigger: 'change' }
                    ],
                    inMarket: [
                        { required: true, message: '请选择上市情况', trigger: 'change' }
                    ],
                    range: [
                        {required: true, message: '请填写经营范围', trigger: 'blur' }
                    ],
                    checkList: [
                        { type: 'array', required: true, message: '请选择涉及领域', trigger: 'change' }
                    ],
                    faren: [
                        { required: true, message: '请选择法人代表', trigger: 'change' }
                    ],
                    email: [
                        { required: true, message: '请填写企业E-mail', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
                    ],
                    phone: [
                        { required: true, message: '请填写企业电话', trigger: 'blur' }
                    ],
                },
//                本地文件路径
                imageUrl:'',
                radio1:'1',
                radio2:'1',
                radio3:'1',
                radio4:'1',
                radio5:'1',
                radio6:'1',
                activeName2: 'first',
                form: {
//                    个人列表数据
                    personList:'',
                    date1: '',
                    date2: '',
                    date3: '',
                    date4: '',
                    money:'',
                    linkMan:'',
                    typeofBus:'',
                    address:'',
                    fax:'',
                    phone:'',
                    url:'',
                    faren:'',
                    inMarket:'',
                    name: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                    checkList:[],
            },
                dialog:{
                    addFaren:{
                        open:false
                    },
                    addLinkman:{
                        open:false
                    },
                    showHistory:{
                        open:false
                    }
                },
                baseValue:{
                    money:'5000',
                    faren:'俞兆洪',
                    linkMan:'成莹',
                    address:'浙江省 杭州市 萧山区 民和路 479号1701',
                    Email:'service@tanwin.cn',
                    phoneNum:'057156686688',
                    fax:'057156686688',
                    url:'www.tanwin.cn'
                },
                //                涉及领域参数
                provinceList:'',
                cityList:'',
                countryList:'',
//                城市
                city:[],
//                县
                country:[],
            }
        },
        methods:{
//            头像上传
            beforeUpload0(file){
//                console.log(this.fileList0)
//                console.log(file)
            },
//            change事件
//            营业执照
            handleChange0(response,file, fileList) {
                this.fileList0 = fileList.slice(-1);
                var a=this.fileList0
                var b = a[0].response
            },
//            财务报表
            handleChange1(response,file, fileList) {
                this.fileList1 = fileList.slice(-1);
                console.log(this.fileList0)
            },
//            照片
            handleChange2(response,file, fileList) {
                this.fileList2 = fileList.slice(-1);
                console.log(this.fileList0)
            },
//            名片
            handleChange3(response,file, fileList) {
                this.fileList3 = fileList.slice(-6);
                console.log(this.fileList0)
            },
//            其他附件
            handleChange4(response,file, fileList) {
                this.fileList4 = fileList.slice(-6);
                var a = this.fileList4
                for(var b in a){
                    console.log(a[b].response.url)
                }
            },
//            财务报表
            Success(res, file) {
//                console.log(res)
            },
            tet(){
                var res={
                    "L0": [
                        {
                            "id": 1,				//option值
                            "name": "环保",				//显示名称
                            "father_id": 0				//父级option值
                        },
                        {
                            "id": 2,
                            "name": "节能",
                            "father_id": 0
                        }
                    ],
                    "L1": [
                        {
                            "id": 11,				//option值
                            "name": "废气处理",				//显示名称
                            "father_id": 1				//父级option值
                        },
                        {
                            "id": 551,
                            "name": "固废处理",
                            "father_id": 1
                        },
                        {
                            "id": 11,				//option值
                            "name": "摩托车废气",				//显示名称
                            "father_id": 2				//父级option值
                        },
                        {
                            "id": 551,
                            "name": "汽车废气",
                            "father_id": 2
                        }
                    ],
                    "L2": [
                        {
                            "id": 111,				//option值
                            "name": "111",			//显示名称
                            "father_id": 1				//父级option值
                        },
                        {
                            "id": 1551,
                            "name": "551",
                            "father_id": 551
                        }
                    ]
                }
                this.provinceList = res.L0
                this.cityList = res.L1
                this.countryList = res.L2
            },
//          获取城市
            change(){
                this.city=[]
                for(var a in this.cityList){
                    if(this.form.date2==this.cityList[a].father_id){
                        this.city.push(this.cityList[a])
                    }
                }
            },
//            获取县级别
            changeThree(){
                this.country=[]
                for(var a in this.countryList){
                    if(this.form.date3==this.countryList[a].father_id){
                        this.country.push(this.countryList[a])
                    }
                }
            },
            //            获取地址数据接口
            getArea(){
                var that = this
                _http.axiosGet(that,that.apiPort.areaApi,(res)=>{
                    that.provinceList=res.L0
                    that.cityList = res.L1
                    that.countryList = res.L2
            })

            },
            getData(){
//                获取人物列表
                var that = this
                _http.axiosGet(that,that.apiPort.person,(res)=>{
                    that.form.person=res.L0
            })
            },
            submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
            return false;
        }
        });
        },
            handleRemove(file,fileList){
                console.log(fileList)

            },
            handleAvatarSuccess(res, file) {
              console.log(res)
                console.log(file)
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
//                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
//                if (!isJPG) {
//                    this.$message.error('上传头像图片只能是 JPG 格式!');
//                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return  isLt2M;
            },
            openDialog(dialog){
                this.dialog[dialog].open = true
            },
            onSubmit() {
                console.log('submit!');
            },
            //            删除上传文件清空服务器上的内容
            paramFileRemove(){
                this.imageUrl=''

            },

        },
        mounted(){
           this.tet()
            var that = this
            Bus.$on('getTarget', function(val){
//                对象复制
                that.form = Object.assign({}, val);
            });
        },
        beforeDestroy(){
            Bus.$off("getTarget")
        },
    }
</script>

<style>
    ul li{
        list-style: none;
        margin-top: 20px;
    }
    .listSty{
        display:inline-block;
        width: 100px
    }
    .mainListSty{
        display:inline-block;
        width: 100px;
        color: red;
    }
    .able:after{
        content: "√";
        color: #6ce26c;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
        margin-left: 10px;
    }
    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
</style>